<template lang="html">
  <div class="app-detail" v-loading="listLoading">
    <app-title title="应用信息"></app-title>
    <ul class="app-detail-list">
      <li>
        <h3>应用包信息</h3>
        <div class="package-detail">
          <div class="app-icon">
            <img :src="appInfo.icon" alt="">
          </div>
          <dl class="app-desc left">
            <dt>应用包名:</dt>
            <dd>{{appInfo.packageInfo.packageName}}</dd>
            <dt>应用名称:</dt>
            <dd>{{appInfo.packageInfo.appName}}</dd>
            <dt>应用版本:</dt>
            <dd>{{appInfo.packageInfo.version}}</dd>
            <dt class="status">默认语言:</dt>
            <dd class="status">{{appInfo.packageInfo.lang}}</dd>
          </dl>
          <dl class="app-desc right">
            <dt>系统支持:</dt>
            <dd>{{appInfo.packageInfo.osSupport}}</dd>
            <dt>权限需求:</dt>
            <dd>{{appInfo.packageInfo.permissionList.length}}个权限需求</dd>
            <dt>文件大小:</dt>
            <dd>{{appInfo.packageInfo.size}}kb</dd>
          </dl>
        </div>
      </li>
      <li>
        <h3>应用类型</h3>
        <dl>
          <dt>应用类型:</dt>
          <dd>
            {{['手机', '平板'][appInfo.type]}}
          </dd>
          <dt>应用分类:</dt>
          <dd>
            {{appInfo.category}}
          </dd>
        </dl>
      </li>
      <li>
        <h3>设置应用上线范围</h3>
        <dl>
          <dt>上线时间:</dt>
          <dd>
            {{appInfo.releaseTime}}
          </dd>
        </dl>
      </li>
      <li>
        <h3>应用效果图</h3>
        <ul class="screenshot-list">
          <li v-for="imgUrl in appInfo.screenShots">
            <img :src="imgUrl"></img>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</template>

<script>
  import AppTitle from './AppTitle'

  export default {
    components: {
      'app-title': AppTitle
    },
    props:{
      appInfo: {
        type: Object,
        default: {
          icon: "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1513853291472&di=e7fc362e0b380876eee30ab88e0803a2&imgtype=0&src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F013f18566fa65e32f8755ac6bb51e6.jpg",
          packageInfo: {
            "packageInfo": {
              "packageName": "com.ele.link",
              "appName": "饿了么",
              "version": "1.02",
              "lang": "简体中文",
              "osSupport": "Android5.0+",
              "permissionList": [
                "访问通讯录","访问照相机","访问文件","录音","通话"
              ],
              "size": 30000
            }
          },
          "type": 1,
          "category": "VR",
          "releaseTime": "2017-12-31 00:00",
          "developer": "John",
          "keyword": [
            "教育","金融","医疗"
          ],
          "website": "www.ele.com",
          "description": "string,一句话介绍",
          "overview": "string,简介",
          "changeLog": "string,更新日志",
          "screenShots": [
            "http://www.apkui.com/zb_users/thumbimg/2015/02/201502104210_7558.png",
            "http://www.apkui.com/zb_users/thumbimg/2015/02/201502104210_7558.png",
            "http://www.apkui.com/zb_users/thumbimg/2015/02/201502104210_7558.png",
            "http://www.apkui.com/zb_users/thumbimg/2015/02/201502104210_7558.png",
          ]
        },
      },
      listLoading: {
        type: Boolean,
        default: true
      }
    }
  }
</script>

<style lang="scss" scoped>
  .app-detail{
    .app-detail-list{
      list-style-type: none;
      padding: 0 40px;
      margin: 0;
      &>li:first-child{
        // border-top: 1px solid #ccc;
      }
      &>li{
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 20px 0px;
        border-bottom: 1px solid #ccc;
        h3{
          font-size: 15px;
          margin-bottom: 0 0 30px 0;
        }
        dt{
          clear: left;
        }
        dd, dt{
          display: inline-block;
          float: left;
          font-size: 14px;
          font-weight: 400;
          margin-bottom: 6px;
        }
        .package-detail{
          display: flex;
          justify-content: center;
          align-items: center;
          .app-icon{
            position: relative;
            width: 50px;
            height: 50px;
            margin-right: 66px;
            img{
              width: 100%;
              height: 100%;
            }
          }
          .app-desc.left{
            margin-right: 40px;
          }
        }
        .screenshot-list{
          display: flex;
          list-style-type: none;
          margin: 0;
          padding: 0;
          li{
            position: relative;
            width: 100px;
            height: 150px;
            border-radius: 6px;
            margin-right: 20px;
          }
          img{
            width: 100%;
            height: 100%;
            border-radius: 6px;
          }
        }
      }
    }
  }
</style>
